<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 100px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 0;
  }
  h1{
    width: 100%;
    text-align: center;
  }
</style>

<body>
  <h1>距离2025-5-10 12:26还剩：</h1>
  <p class="clock">
    <span id="date"></span>
    <span id="hour">00</span>
    <span id="minutes">00</span>
    <span id="scond">00</span>
  </p>
  <script>
    function getCountTime() {
      const now = +new Date()
      const last = +new Date('2025-5-10 12:26')
      const count = (last - now) / 1000

      let d = parseInt(count / 60 / 60 / 24)
      let h = parseInt(count / 60 / 60 % 24)
      let m = parseInt(count / 60 % 60)
      let s = parseInt(count % 60)
      d = d < 10 ? '0' + d : d
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      console.log(' ', d, h, m, s)
      document.querySelector('#date').innerHTML = d
      document.querySelector('#hour').innerHTML = h
      document.querySelector('#minutes').innerHTML = m
      document.querySelector('#scond').innerHTML = s
    }
    getCountTime()
    setInterval(getCountTime, 1000);
  </script>
</body>

</html>